<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="特性案例：实虚混合线图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <canvas width='300' height='300' id="mountNode"></canvas>
  </div>
  <script>
  //注册自定义形状
  var hybridDefine = {
    draw: function draw(cfg, container) {
      var style = _.assign({
        fill: cfg.color,
        strokeStyle: cfg.color,
        lineWidth: cfg.size || 2,
        z: cfg.isInCircle
      }, cfg.style);

      var points = cfg.points;
      var dashDim = cfg.style.dashDim || null;

      if (points.length < 2) return;
      ///cfg._origin
      console.log('points',points);
      let shapes = [];
      for(let i=0;i<points.length;i++){
        let shape;
        if(points[i].color==='#2FC25B'){
          shape = container.addShape('Polyline', {
              className: 'line',
              attrs: F2.Util.mix({
                lineDash: [style.lineWidth * 2, style.lineWidth * 2],
                points: [points[i]],
                fill:points[i].color
              }, style)
            });
        }else{
          shape = container.addShape('Polyline', {
              className: 'line',
              attrs: F2.Util.mix({
                points: [points[i]],
                fill:points[i].color
              }, style)
            });
        }
        shapes.push(shape);
      }
      return shapes;
//#2FC25B
  //#1890FF
    },

    //将一整条线按实线虚线分为多条
    splitLines: function splitLines(ps, dim) {
      var lines = [];
      var i = 0,
        cur = [],
        last = null;
      last = cur.isDash = ps[0]._origin[dim] === true;
      cur.start = ps[0];

      //分线
      while (i < ps.length) {
        var p = ps[i];
        var isDash = p._origin[dim] === true;
        if (last !== isDash) {
          cur.end = p;
          lines.push(cur);

          cur = [p];
          cur.start = ps[i - 1];
          cur.isDash = isDash;
        } else {
          cur.push(p);
        }

        if (i >= ps.length - 1) {
          cur.end = p;
          lines.push(cur);
        }
        last = isDash;
        i++;
      }

      //计算绘制点
      lines = lines.map(function(ps) {
        var i = 0,
          l = ps.length,
          line = [];
        line.isDash = ps.isDash;
        line.push(hybridDefine.getMid(ps.start, ps[0]));
        for (; i < l; i++) {
          line.push(ps[i]);
        }
        line.push(hybridDefine.getMid(ps[l - 1], ps.end));
        return line;
      });

      return lines;
    },

    //计算两个点的中点
    getMid: function getMid(p1, p2) {
      return {
        x: (p1.x + p2.x) / 2,
        y: (p1.y + p2.y) / 2
      };
    }
  };
  F2.Shape.registerShape('line', 'hybrid', hybridDefine);
  var data = [{
    item: 'Design',
    user: '用户 A',
    score: 70
  }, {
    item: 'Design',
    user: '用户 B',
    score: 30
  }, {
    item: 'Development',
    user: '用户 A',
    score: 60
  }, {
    item: 'Development',
    user: '用户 B',
    score: 70
  }, {
    item: 'Marketing',
    user: '用户 A',
    score: 50
  }, {
    item: 'Marketing',
    user: '用户 B',
    score: 60
  }, {
    item: 'Users',
    user: '用户 A',
    score: 40
  }, {
    item: 'Users',
    user: '用户 B',
    score: 50
  }, {
    item: 'Test',
    user: '用户 A',
    score: 60
  }, {
    item: 'Test',
    user: '用户 B',
    score: 70
  }, {
    item: 'Language',
    user: '用户 A',
    score: 70
  }, {
    item: 'Language',
    user: '用户 B',
    score: 50
  }, {
    item: 'Technology',
    user: '用户 A',
    score: 70
  }, {
    item: 'Technology',
    user: '用户 B',
    score: 40
  }, {
    item: 'Support',
    user: '用户 A',
    score: 60
  }, {
    item: 'Support',
    user: '用户 B',
    score: 40
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    width:500,
    height:500
  });

  chart.coord('polar');
  chart.source(data, {
    score: {
      min: 0,
      max: 120,
      nice: false,
      tickCount: 4
    }
  });
  
  chart.tooltip({
    custom: true, // 自定义 tooltip 内容框
    onChange: function onChange(obj) {
      var legend = chart.get('legendController').legends.top[0];
      var tooltipItems = obj.items;
      var legendItems = legend.items;
      var map = {};
      legendItems.map(function(item) {
        map[item.name] = _.clone(item);
      });
      tooltipItems.map(function(item) {
        var name = item.name;
        var value = item.value;
        if (map[name]) {
          map[name].value = value;
        }
      });
      legend.setItems(_.values(map));
    },
    onHide: function onHide() {
      var legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });
  chart.axis('score', {
    label: function label(text, index, total) {
      if (index === total - 1) {
        return null;
      }
      return {
        top: true
      };
    },
    grid: function grid(text) {
      if (text === '120') {
        return {
          lineDash: null
        };
      }
    },
    line: {
      top: false
    }
  });
  chart.area().position('item*score').color('user').animate({
    appear: {
      animation: 'groupWaveIn'
    }
  });
  // chart.line().position('item*score').color('user').animate({
  //   appear: {
  //     animation: 'groupWaveIn'
  //   }
  // });
  chart.line().shape('hybrid').position('item*score').color('user').style({
    dashDim: 'dash'
  });
  chart.point().position('item*score').color('user').style({
    stroke: '#fff',
    lineWidth: 1
  }).animate({
    appear: {
      delay: 300
    }
  });

  chart.render();
</script>


</body>
</html>
